<template>
  <div class="app-container">
    <el-dialog :title="title" :visible.sync="visible" width="600px" v-if="visible" append-to-body
      :close-on-click-modal="false">
      <div class="txt">已选择{{this.form.customerCouponIdList.length}}条记录请选择核销店铺进行核销</div>
      <el-form ref="form" :model="form" :rules="rules" :label-width="labelWidth" :disabled="disabled">
        <el-form-item label="核销店铺：" prop="shopId" :key="19">
          <el-select v-model="form.shopId" placeholder="请选择" filterable clearable
            :style="{width: inputWidth}">
            <el-option v-for="(item,index) in shopList" :key="index" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" :loading="addLoading">确认核销</el-button>
        <el-button @click="cancel">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    verificationCoupon,
    verificationShopList
  } from "@/api/consumeMiningManagement/clockingCouponCode";

  export default {
    // dicts: ['asset_card_type'],
    name: "Dialog",
    data() {
      //调整数量校验
      var checkNum = (rule, value, callback) => {
        var reg = /(^[1-9]\d*$)/;
        if (!value) {
          return callback(new Error('请填写调整数量'));
        }
        // else if (value < 1 || value > 99999) {
        //   return callback(new Error('请输入1-99999'));
        // } 
        else if (!reg.test(value)) {
          return callback(new Error('请输入正确数值'));
        } else {
          callback();
        }
      };
      return {
        labelWidth: '120px',
        inputWidth: '300px',
        id: '', //
        addLoading: false,
        releaseLoading: false,
        // 是否禁用表单
        disabled: false,
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        visible: false,
        status: 1, //1:发行库存调整   2:盲盒库存调整
        // 表单参数
        form: {
          shopId: '', //调整数量
          customerCouponIdList: [], //数字权益卡id數組
        },
        // 表单校验
        rules: {
          shopId: [{
            required: true,
            message: "请选择店铺",
            // validator: checkNum,
            trigger: [ "change"]
          }],
        },
        shopList: [],
      };
    },
    created() {
      
    },
    methods: {
      /** 打开发行管理弹框 */
      open(productIds) {
        this.reset();
        console.log('productIds',productIds)
        this.form.customerCouponIdList = productIds
        this.title = "批量核销券码"
        this.visible = true
        this.reset() 
        this.getShopList()
      },
      // 取消按钮
      cancel() {
        this.visible = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form.shopId = ''
      },
      //查询核销店铺下拉框
      getShopList() {
        console.log(2222222,this.form.customerCouponIdList)
        var data = {
          customerCouponIdList: this.form.customerCouponIdList
        }
        verificationShopList(data).then(response => {
          this.shopList = response.result
        });
      },
      /** 提交按钮 */
      submitForm(type) {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.status == 1) { //发行库存调整
              verificationCoupon(this.form).then(response => {
                this.$message.success('操作成功');
                this.cancel();
                this.$emit('refresh')
                this.addLoading = false
                this.releaseLoading = false
              }).catch(() => {
                this.addLoading = false
                this.releaseLoading = false
              });
            }
          }
        });
      },
    }
  };

</script>
<style scoped>
  .img_box {
    width: 100px;
    height: 70px;
    border-radius: 4px;
  }
  .txt{
    width: 100%;
    text-align: center;
    padding-bottom: 12px;
  }
</style>
